<template>
  <div id="mr-login">
    <div class="tab-img"><img src="../../static/img/login@2x.png" /></div>
    <div class="from">
        <group>
            <x-input name="mobile" keyboard="number"  ref="mobile01"  v-model="mobileval"  is-type="china-mobile" placeholder="请输入手机号">
                <img slot="label" src="../../static/img/shouji@2x.png" >
            </x-input>
            <x-input  ref="code01" v-model="codeval" keyboard="number" class="weui-vcode" placeholder="请输入短信验证码">
              <img slot="label" src="../../static/img/mima@2x.png" >
              <div slot="right" v-bind:class="[start? 'vcode-inactive':'vcode-active']" @click="sendcode" style="color:rgb(47, 120, 236)">{{timerText()}}</div>
              <countdown style="display:none" slot="right" :start="start" @on-finish="timerFinished" v-model="timer"></countdown>
            </x-input>
            <x-input id="inputel" ref="password01"  v-model="password" :type="seen ? 'text' : 'password'"  placeholder="请输入密码(至少6位数字字母组合)">
                <img @click="earevent" v-show="seen"  class="ear" slot="right" src="../../static/img/icon_eye.png" >
                <img @click="earevent"  v-show="!seen" class="ear" slot="right" src="../../static/img/icon_eye_close.png" >
                <img slot="label" src="../../static/img/mima@2x.png" >
            </x-input>
            <x-input keyboard="text" :disabled="inputText" :is-type="inviteCode"  ref="invite01" v-model="inviteCode" placeholder="邀请码(选填)">
                <img slot="label" src="../../static/img/mima@2x.png" >
            </x-input>
        </group>
        <div v-transfer-dom>
        <x-dialog v-model="showHideOnBlur" class="dialog-demo image-code" hide-on-blur>
          <div style="overflow:scroll;-webkit-overflow-scrolling:touch;">
            <x-input :show-clear="false" placeholder="请输入图形验证码" v-model="imageCode" class="weui-cell_vcode">
                <img slot="label" src="../../static/img/mima@2x.png" >
                <img slot="right" @click="imgevent" class="weui-vcode-img" :src="urlImgCode + captchaid">
              </x-input>
          <div @click="confirmImgCode" class="confirm">
            <span>确定</span>
          </div>
          </div>
        </x-dialog>
        </div>
        <div class="agreement"><x-icon type="ios-circle-filled" size="30"></x-icon>阅读并同意<a href="../../static/agreement.html">《信贷动力注册及使用协议》</a></div>
        <div class="share" @click="registered">注册</div>
        <div class="register-other" @click="login">登录</div>
    </div>
  </div>
</template>
<script>
var timeStamp = String(Number(new Date()))
import { XInput, Group, Flexbox, FlexboxItem, XButton, Countdown, TransferDomDirective as TransferDom, XDialog } from 'vux'
import api from '../api'
import utils from '../utils'
export default {
  directives: {
    TransferDom
  },
  data () {
    return {
      inputText: false,
      mobileval: '',
      password: '',
      codeval: '',
      iconType: '',
      inviteCode: utils.getQueryString('inviteCode'),
      seen: false,
      timer: 60,
      start: false,
      showHideOnBlur: false,
      tokenval: '',
      imageCode: '', // 图片验证码
      urlImgCode: this.$store.state.imgvcode,
      captchaid: ''
    }
  },
  components: {
    XInput,
    Group,
    Flexbox,
    FlexboxItem,
    XButton,
    Countdown,
    XDialog
  },
  created () {
    window.document.title = '注册'
    this.tokenval = utils.AnonToken(timeStamp)
    utils.jssdkwx(api, this.$wechat, this.$store)
    if (utils.getQueryString('inviteCode')) {
      this.inputText = true
    } else {
      this.inputText = false
    }
  },
  methods: {
    login () {
      this.$router.push({
        path: '/passport/login',
        query: utils.toQueryParams(window.location.href)
      })
    },
    // 眼睛
    earevent () {
      this.seen = !this.seen
    },
    imgevent () {
      this.captchaid = '00' + utils.randomString(32)
    },
    // 发送验证码
    sendcode () {
      if (this.start) {
        return
      } else if (this.mobileval === '') {
        this.$vux.toast.show({
          text: '请输入手机号',
          type: 'warn',
          width: '4rem'
        })
      } else if (this.$refs.mobile01.valid === false) {
        this.$vux.toast.show({
          text: '请输入正确手机号',
          type: 'success',
          width: '4rem'
        })
      } else {
        console.log(1)
        api.check({
          token: this.tokenval,
          timestamp: timeStamp,
          mobile: this.mobileval
        }).then(res => {
          if (res.status === '400001001') {
            this.imageCode = ''
            this.showHideOnBlur = !this.showHideOnBlur
            this.captchaid = '00' + utils.randomString(32)
          } else if (res.status === '400001002') {
            this.$vux.toast.show({
              text: '用户已注册',
              type: 'warn',
              width: '4rem'
            })
          } else {
            this.$vux.toast.show({
              text: res.message,
              type: 'warn',
              width: '4rem'
            })
          }
        })
      }
    },
    confirmImgCode () {
      var params = {
        captcha: this.imageCode,
        captchaId: this.captchaid
      }
      var self = this
      if (this.imageCode === '') {
        this.$vux.toast.show({
          text: '请输入图形码',
          type: 'warn',
          width: '4rem'
        })
      } else {
        api.validcode(params).then(res => {
          if (res.status === '200') {
            this.showHideOnBlur = false
            self.start = true
            api.sendCode({
              token: self.tokenval,
              timestamp: timeStamp,
              mobile: self.mobileval,
              type: 1,
              sendType: 1,
              from: 0,
              captcha: this.imageCode,
              captchaId: this.captchaid
            }).then(res => {
              console.log(res)
              if (res.status === '200') {
                self.$vux.toast.show({
                  text: res.message,
                  type: 'success',
                  width: '4rem'
                })
              } else {
                self.$vux.toast.show({
                  text: res.message,
                  type: 'warn',
                  width: '4rem'
                })
              }
            })
          } else {
            this.captchaid = '00' + utils.randomString(32)
            this.$vux.toast.show({
              text: res.message,
              type: 'warn',
              width: '4rem'
            })
          }
        })
      }
    },
    // 注册
    registered () {
      var self = this
      var passwordReg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/
      if (this.mobileval === '') {
        this.$vux.toast.show({
          text: '请输入手机号',
          type: 'warn',
          width: '4rem'
        })
      } else if (this.$refs.mobile01.valid === false) {
        this.$vux.toast.show({
          text: '请输入正确手机号',
          type: 'warn',
          width: '4rem'
        })
      } else if (this.codeval === '') {
        this.$vux.toast.show({
          text: '请输入短信验证码',
          type: 'warn',
          width: '4rem'
        })
      } else if (this.password === '') {
        this.$vux.toast.show({
          text: '请输入密码',
          type: 'warn',
          width: '4rem'
        })
      } else {
        api.check({
          token: this.tokenval,
          timestamp: timeStamp,
          mobile: this.mobileval
        }).then(res => {
          if (res.status === '400001001') {
            api.validate({
              token: self.tokenval,
              timestamp: timeStamp,
              mobile: self.mobileval,
              type: 1,
              sendType: 1,
              vcode: self.codeval,
              from: 0
            }).then(res => {
              if (res.status === '200') {
                if (passwordReg.test(self.password) === false || self.password.length <= 5) {
                  self.$vux.toast.show({
                    text: '密码至少为6位数字和字母组合',
                    type: 'warn',
                    width: '4rem'
                  })
                } else {
                  if (utils.getQueryString('inviteCode')) {
                    if (this.inviteCode !== utils.getQueryString('inviteCode')) {
                      self.$vux.toast.show({
                        text: '邀请码必须为原邀请码',
                        type: 'warn',
                        width: '4rem'
                      })
                    } else {
                      self.apiregister()
                    }
                  } else {
                    self.apiregister()
                  }
                }
              } else {
                this.$vux.toast.show({
                  text: res.message,
                  type: 'warn',
                  width: '4rem'
                })
              }
            })
          } else if (res.status === '400001002') {
            this.$vux.toast.show({
              text: '用户已注册',
              type: 'warn',
              width: '4rem'
            })
          } else {
            this.$vux.toast.show({
              text: res.message,
              type: 'warn',
              width: '4rem'
            })
          }
        })
      }
    },
    apiregister () {
      api.register({
        token: this.tokenval,
        timestamp: timeStamp,
        vcode: this.codeval,
        mobile: this.mobileval,
        password: this.password,
        from: 0,
        authCode: this.$store.state.wxCode || utils.getQueryString('code') || '',
        inviteNum: this.inviteCode || ''
      }).then(res => {
        if (res.status === '200') {
          this.$vux.toast.show({
            text: '注册成功',
            type: 'success',
            width: '4rem'
          })
          localStorage.setItem('status', '0')
          if (this.inviteCode) {
            window.location.replace(process.env.BASE_URL + '/middleBack')
          } else {
            window.location.replace(localStorage.getItem('wxLastUrl'))
          }
        } else if (res.status === '400007001') {
          this.$vux.toast.show({
            text: '微信认证失败，需要重新注册',
            type: 'warn',
            width: '4rem'
          })
          utils.redirectWx('-1')
        } else {
          this.$vux.toast.show({
            text: res.message,
            type: 'warn',
            width: '4rem'
          })
        }
      })
    },
    timerFinished: function () {
      console.log('stop')
      this.start = false
      this.timer = 60
    },
    timerText: function () {
      if (this.start) {
        return '重新发送(' + this.timer + ')'
      } else {
        return '发送验证码'
      }
    }
  }
}
</script>

